<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
<script src="scripts/our.js"></script>
<script src="scripts/widget-tabpanel.js"></script>
<style>
body { margin: 0; background: url("images/index-bg.jpg") repeat; }
.widget-tabpanel { width: 100%; overflow: hidden; }
.widget-tabpanel .tabs { float: left; width: 20%; list-style: none; margin: 0; padding: 0; }
.widget-tabpanel .tab a { display: block; width: 65%; height: 25px; margin:20px 0 0 86px; padding: 12px 10px 6px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; background: #66ab00; color: #fff;; font: 14px/20px Verdana, Helvetica, Arial, "Microsoft YaHei", SimSun, sans-serif; text-decoration: none; white-space: nowrap; text-align: center; outline: none; }
.widget-tabpanel .tab a:hover { background: white; color: #000; }
.widget-tabpanel .tabs .active a,
.widget-tabpanel .tabs .active a:hover { height: 25px; margin-top: 20px; padding: 14px 10px 6px; background: white; color: black; }
.widget-tabpanel .panels { display:inline-block; width: 80%; background-color: #fff; }
.widget-tabpanel .panel { background: white; font: 100px/250px Verdana, Helvetica, Arial, "Microsoft YaHei", SimSun, sans-serif; text-align: center; }
</style>
</head>
<body>
<div class="widget-tabpanel">
  <ul class="tabs">
    <li class="tab active">
      <a href="#">第1个</a>
    </li>
    <li class="tab">
      <a href="#">第2个</a>
    </li>
    <li class="tab">
      <a href="#">第3个</a>
    </li>
  </ul>
  <div class="panels">
    <div class="panel">一</div>
    <div class="panel">二</div>
    <div class="panel">三</div>
  </div>
</div>
</body>
</html>
